<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>地图常用方法</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .btns {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 10;
        }
    </style>
    <style>
        .time-selector {
            position: absolute;
            left: 630px;
            bottom: 170px;
            width: 740px;
        }

        .time-selector .audioControl {
            position: absolute;
            display: flex;
            right: 210px;
            top: 0;
            width: 140px;
            justify-content: space-between;
        }

        .time-selector .audioControl .iconfont {
            cursor: pointer;
            color: #ea963d;
            font-size: 32px;
        }

        .time-selector .qzbl {
            position: absolute;
            top: -30px;
            right: 0;
            zoom: 1.5;
        }

        .time-selector .qzbl .el-checkbox {
            margin-right: 20px;
        }

        .time-selector .speedBar {
            width: 200px;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            height: 40px;
        }

        .time-selector .speedBar span {
            width: 70px;
            color: #ea963d;
            font-size: 21px;
            line-height: 40px;
        }

        .time-selector .speedBar .bar {
            width: 170px;
        }

        .time-selector .speedBar .bar .el-slider__bar {
            background-color: #ea963d;
        }

        #TimeSlider .block {
            background-color: white;
            background-image: url(../../map/static/imgs/kedu.png);
            background-repeat: no-repeat;
            background-size: 100% 30px;
            background-position: 0 calc(50% - 1px);
            border: 2px solid #71eafc;
            border-radius: 5px;
        }

        #TimeSlider .block>.el-slider {
            margin: 0 13px;
        }

        #TimeSlider .block .el-slider__button {
            width: 8px;
            height: 8px;
        }

        #TimeSlider .timer {
            margin: 10px 0 0 20px;
        }

        #TimeSlider .block-top {
            display: flex;
            padding: 0 20px;
        }

        #TimeSlider .block-top .date-pick input {
            background: #0b3369;
            border: 1px solid #71eafc;
            height: 40px;
            width: 170px;
            color: white;
            font-size: 20px;
            padding-right: 10px;
        }

        #TimeSlider .block-top .time-range {
            display: flex;
            align-items: center;
            color: white;
            font-size: 20px;
        }

        #TimeSlider .block-top .time-range img {
            width: 30px;
            margin-right: 10px;
            display: block;
            position: relative;
        }
    </style>
    <!-- 需要引入基于vue的时间选择插件  图标样式-->
    <script src="./js/qs.js"></script>
    <script src="./js/util.js"></script>
    <script src="./js/vue.min.js"></script>
    <link rel="stylesheet" href="./js/elementui/index.css">
    <script src="./js/elementui/index.js"></script>
    <link rel="stylesheet" href="../../map/static/icon/iconfont.css">
    <script src="./js/timeSliderPicler.js"></script>
</head>

<body>
    <div id="app">
        <iframe id="mapFrame" src="" frameborder="0" style="width: 100vw;height: 100vh;"></iframe>
        <div class="btns">
            <button onclick="app.getPath()">展示轨迹</button>
            <button onclick="app.clearMarkerAndPath()">清除轨迹</button>
        </div>
        <timesliderpicker v-show="showPath" ref="timeSlider" @changed="getPath"></timesliderpicker>
    </div>
</body>
<script type="text/javascript">
    // 初始化配置 和 样式配置
    // 可以注销 和 打开相关配置，查看变化效果
    document.getElementById('mapFrame').src = '../../map/index.html?name=澄江街道';
    window.$Config = {
        mapConfig: {
            useMask: '0'
        }
    }


    var mapWindow, lwmap, mapApp;
    window.mapLoaded = function (w, m, a) {
        mapWindow = w;
        lwmap = m;
        mapApp = a;
    };

    var app = new Vue({
        el: '#app',
        data() {
            return {
                showPath: '',
            }
        },
        methods: {
            getPath: function () {
                var vm = this;
                var user = {
                    id: 'admin',
                    name: 'yym'
                };
                vm.showPath = user;
                // lwmap.clearActivities((n) => n.lwType == 'PersonMarker');
                lwmap.removeMarkerAndPath();
                var dateObj = vm.$refs.timeSlider.getResult();
                var apiUrl = '/api/v1/zhdd/getRoute.jsp?' +  $Util.stringify({
                    qz: dateObj.qz,
                    bl: dateObj.bl,
                    userId: user.id,
                    dateFrom: dateObj.start + ':00.000',
                    dateTo: dateObj.end + ':00.000'
                });
                vm.getApiData(apiUrl).then(vm.showPersonPath);
            },
            getApiData: function (url) {
                console.log('假装请求了：' + url);
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([[{"lng":119.82375916448507,"lat":31.33689627573111},{"lng":119.82391233665447,"lat":31.336868690575812},{"lng":119.8241996804668,"lat":31.33680953339542},{"lng":119.82437080561722,"lat":31.336909782960724},{"lng":119.8243707151614,"lat":31.337047759392597},{"lng":119.82438363971835,"lat":31.337186678981574},{"lng":119.82451877417304,"lat":31.337221072874073},{"lng":119.82468110122511,"lat":31.33701636413504},{"lng":119.8247882562006,"lat":31.33698086543301},{"lng":119.82491958752634,"lat":31.336729275891727},{"lng":119.82544121922545,"lat":31.336830580149936},{"lng":119.8256618009185,"lat":31.336432441557612},{"lng":119.8252164618873,"lat":31.336014912377227},{"lng":119.82579247751102,"lat":31.33573083262407},{"lng":119.82552728140219,"lat":31.33546236425096},{"lng":119.82579682235183,"lat":31.335255898066514},{"lng":119.82585128116588,"lat":31.33473968626374},{"lng":119.8264321897668,"lat":31.334747180061314},{"lng":119.82648154757369,"lat":31.33437694177103},{"lng":119.82667520140734,"lat":31.3339447831606},{"lng":119.82678837002366,"lat":31.333978031891096},{"lng":119.82660340273307,"lat":31.333528335759844},{"lng":119.8264014658117,"lat":31.333024727931317},{"lng":119.82669904480115,"lat":31.3329228421815},{"lng":119.82726106668648,"lat":31.332892024424847},{"lng":119.82684361917275,"lat":31.332520973068824}]]);
                    }, 500)
                }); 
            },
            clearMarkerAndPath: function () {
                this.showPath = '';
                lwmap.removeMarkerAndPath();
            },
            showPersonPath: function (data) {
                var vm = this;
                if (!data || !data.length) {
                    vm.$message({message: '该人员在时间段内无轨迹信息', offset: 100});
                    return;
                }
                var pathData = [];
                // 组装轨迹
                data.forEach((n, index) => {
                    pathData.push([]);
                    n.forEach(j => {
                    console.log([j.lng, j.lat]);
                    pathData[index].push([j.lng, j.lat]);
                    });
                });

                // 调整视角
                var firstPoint = pathData[0][0];
                lwmap.setCenterAndZoom(firstPoint, 17);

                // 添加路径和marker 开始移动
                peoPoint = lwmap.addMarkerAndPath(pathData, `../../map/static/imgs/map/zhifa.png`, [30, 35], [15, 35], vm.showPath.name, [-25, 0], 'BM', 'red', 4);
                peoPoint.init();
                peoPoint.run(vm.$refs.timeSlider.pathSpeed);
            }
        },
        mounted: function () {
            
        }
    })
</script>

</html>